<template>
  <div class="">
    <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" sortable label="数值 1"> </el-table-column>
      <el-table-column prop="amount2" sortable label="数值 2"> </el-table-column>
      <el-table-column prop="amount3" sortable label="数值 3"> </el-table-column>
      <el-table-column prop="amount4" sortable label="数值 4"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      tableData: [
        {
          id: '12987122',
          name: '王小虎',
          amount1: '11',
          amount2: '3.2',
          amount3: 10,
          amount4: 88
        },
        {
          id: '12987123',
          name: '王小虎',
          amount1: '11',
          amount2: '3.2',
          amount3: 12,
          amount4: 88
        },
        {
          id: '12987124',
          name: '王小虎',
          amount1: '11',
          amount2: '3.2',
          amount3: 12,
          amount4: 88
        },
        {
          id: '12987125',
          name: '王小虎',
          amount1: '11',
          amount2: '3.2',
          amount3: 12,
          amount4: 88
        },
        {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '3.2',
          amount3: 12,
          amount4: 88
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 第2行, 第2列. 合并行数1行,列数3列
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex)
      if (rowIndex === 1) {
        if (columnIndex === 1) {
          // 合并行数1行,列数3列
          // 数组写法
          // return [1, 3]
          // 对象写法
          return {
            rowspan: 1,
            colspan: 3
          }
          // 这里要写一个else的判断,不然被合并列的原始数据会填充到合并之后的表格里
          // 这个判断是把合并的第3列,第4列的值省略,在合并的表格右边直接填原先第5列的值,合并了几列,就省略几列的值
        } else if (columnIndex === 2 || columnIndex === 3) {
          // else 判断, 合并的行和列对应的单元格, 要置位[0,0],也就是删掉
          // 否则他的数据会排挤后面的数据
          return [0, 0]
        }
      }
    }
  }
}
</script>

<style scoped></style>
